<template>
  <div class="supervision-left">
    <div class="supervision-left-top" style="cursor: pointer;" @click="gohome">
      <img src="@/assets/img/townPreview/回到首页.png" alt="" />
      <span>回到首页</span>
    </div>
    <div class="supervision-left-content">
      <!-- <left-item v-for="(item,index) in list" :key="index" :item="item" /> -->
      <div class="full-right-table">
        <div class="full-right-table-title" style="font-size:18px">
          资金资产资源情况
        </div>
        <dv-scroll-board :config="config1" style="width:100%;height:90%" />
      </div>
      <div class="left-table">
        <div class="left-table-title">{{ tableData.title }}</div>
        <div class="left-table-content">
          <dv-scroll-board
            :config="tableData.data"
            style="width:100%;height:100%"
            @click="tableClick"
          />
        </div>
      </div>
    </div>
    <a-modal
      :visible="dbclickVisible"
      width="88vw"
      class="dbclickModal"
      :body-style="{ height: '60vh' }"
      cancel-text="取消"
      ok-text="确定"
      @ok="dbclickOk"
      @cancel="dbclickCancel"
    >
      <table-common :menu-id="1627546142847" :filter-list="[]" />
    </a-modal>
  </div>
</template>

<script>
// import VEcharts from '@/components/vecharts';
import LeftItem from "./LeftItem";
import _ from "lodash";
import { getQueryBodyByProduce } from "@/api/dynamicInterface";
import tableCommon from "@/components/tableCommon/index.vue";

export default {
  name: "Left",
  components: {
    // VEcharts,
    LeftItem,
    tableCommon
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    table: {
      type: Object,
      default: () => ({})
    },
    table1: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // tableData: {},
      tableList: [],
      dbclickVisible: false,
      config1: {
        header: ["单位", "资金", "资产", "资源"],
        data: [
          ["湖州市", "0", "0", "0"],
          ["绍兴市", "1331984.56", "0", "0"],
          ["杭州市", "0", "0", "0"],
          ["宁波市", "0", "0", "0"],
          ["嘉兴市", "0", "0", "0"],
          ["丽水市", "0", "0", "0"],
          ["台州市", "0", "0", "0"],
          ["温州市", "0", "0", "0"],
          ["金华市", "0", "0", "0"],
          ["衢州市", "0", "0", "0"],
          ["舟山市", "0", "0", "0"]
        ],
        headerBGC: "#306494",
        rowNum: 8,
        columnWidth: [500, 500, 250, 250]
      }
    };
  },
  // created() {
  //   this.getTableData();
  // },
  methods: {
    dbclickCancel() {
      this.dbclickVisible = false;
    },
    dbclickOk() {
      this.dbclickVisible = false;
    },
    gohome() {
      this.$router.push("/");
    },
    getTableData() {
      const data = _.cloneDeep(this.table);
      // getQueryBodyByProduce({
      //   pageIndex: 0,
      //   pageSize: 100,
      //   tableId: 824,
      //   pageType: 1
      // }).then(res => {
      //   if (res.success && res.data.length) {
      //     this.tableList = res.data;
      //     data.data.data = [];
      //     res.data.forEach(item => {
      //       const arr = [];
      //       arr[0] = item.PROGRAMNAME2;
      //       arr[1] = item.EJXMJE;
      //       arr[2] = item.DEPARTMENTNAME;
      //       data.data.data.push(arr);
      //     });
      //   }
      this.tableData = data;
      // });
    },
    tableClick({ rowIndex }) {
      // this.dbclickVisible = true;
      // const { PROGRAMCODE2 } = this.tableList[rowIndex];
    }
  },
  computed: {
    tableData() {
      const data = _.cloneDeep(this.table1);
      const tableData = data.data && data.data.data;
      tableData && tableData.length && tableData.forEach(i => {
        i[1] = `<span style="color:#c1c919;">${i[1]}</span>`;
        i[2] = `<span style="color:#C1C919;">${i[2]}</span>`;
        // if (i[3] === '低风险') {
        //   i[3] = `<span style="color:#37CA61;">${i[3]}</span>`;
        // } else if (i[3] === '中风险') {
        //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
        // } else if (i[3] === '高风险') {
        //   i[3] = `<span style="color:#9F2115;">${i[3]}</span>`;
        // }
        i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
      });
      return data;
    }
  }
};
</script>

<style lang="scss" scoped>
.supervision-left {
  padding: 1%;
  color: #1fd2ff;

  .supervision-left-top {
    border: 1px solid #1fd2ff;
    border-radius: 9px;
    padding: 5px 25px;
    height: 34px;
    text-align: center;
    img {
      vertical-align: middle;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
    }
  }
  .supervision-left-content {
    height: calc(100% - 34px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 1%;
    .left-item {
      margin-top: 10px;
      height: 33%;
      width: 100%;
    }
    .left-table {
      margin-top: 10px;
      height: calc(34% - 30px);
      background-image: url("~@/assets/images/fullscreen/xmlx.png");
      background-size: 100% 100%;
      padding: 10px;
      .left-table-title {
        height: 30px;
        font-size: 18px;
      }
      .left-table-content {
        height: calc(100% - 30px);
        .dv-scroll-board {
          color: #1fd2ff;
        }
      }
    }
  }
}
.full-right-table {
  background-image: url("~@/assets/images/fullscreen/xmlx.png");
  background-size: 100% 100%;
  padding: 10px;
  height: 67%;
  .full-right-table-title {
    height: 10%;
    color: #1fd2ff;
    padding-left: 20px;
  }
  .dv-scroll-board {
    color: #1fd2ff;
  }
}
</style>
